import React, { useEffect,useState,useRef } from 'react'
import { Toast, NavBar } from 'react-vant';
import s from './style.module.less'
import { Search } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom';
// import jsonData from './points/index.json'
import MapList from  '../../../components/listTopofMap'
import axios from '@/utils/axios.js'
// 读取覆盖物信息
let width = 100
let innerHTML = '国美第一城'
let jsonData = []

export default function Map() {
  const mapRef = useRef(null)
  const mapList = useRef(null)
  const myMapRef = useRef()
  let map = null
  const [selected, setselected] = useState(null)
  const [selectPolt, setselectPolt] = useState(null)
  const [isShow, setIsShow] = useState(true)
  const navigate = useNavigate()
  const goToHome = ()=>{
    navigate('/')
  }
  function createDOM(e) {
    let div = document.createElement('div')
    div.className = e?.lat == selected ? s.overlayActive : s.overlay
    div.innerHTML = innerHTML
    div.style.width = `${width}px`
    return div
  }

  useEffect(() => {
    axios.get('/plots/all').then((result)=>{
      // console.log(result?.data?.list);
      if (result?.data?.list?.length > 0) {
        jsonData = result?.data?.list
      } 
      const customOverlayArr = jsonData
      let map = myMapRef.current
      // 注意在react脚手架中全局对象需要使用 window 来访问，否则会造成eslint校验错误
      let originlat = 39.940265227661094,originlng = 116.51803990238646
      // 点击覆盖物后重新获取中心点坐标
      jsonData.forEach(element => {
        if (element.lat == selected) {
          originlat = element.lat
          originlng = element.lng
        }
      });
      // 设置中心点坐标
      const point = new window.BMapGL.Point(originlng, originlat) //默认国美
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      map.addEventListener('click', function(e) {
       const { lat, lng } = e.latlng
       console.log(lat,lng,'point');
       mapList.current?.close()
     });
      map.centerAndZoom(point, 16)
      // 初始化地图  15是放大级别
      //开启鼠标滚轮缩放
      var location = new BMapGL.LocationControl();  // 添加定位控件
      map.addControl(location);
  
      customOverlayArr.forEach(element => {
        const {name,lat,lng} = element
        const length = name.length
        innerHTML = name
        width = length * 13
        // 创建自定义覆盖物
        const customOverlay = new BMapGL.CustomOverlay(createDOM, {
        point: new BMapGL.Point(lng, lat),
        opacity: 0.5,
        map: map,
        offsetY: -10,
        properties: {
            title: 'this is a title',
            size: '300',
            lat:lat,
            lng:lng,
            PoltId:element.id,
            PoltInfo:element
          }
        });
        map.addOverlay(customOverlay);
        customOverlay.addEventListener('click', function (e) {
          console.log(e,'e');
          setselected(e?.target?.point?.lat)
          setselectPolt(e?.target?.properties?.PoltInfo)
          mapList.current.emit()
        });
      });
    })

  }, [selected])
  useEffect(()=>{
    myMapRef.current = new window.BMapGL.Map(mapRef.current)
  },[])
  return (
    <div className={s.main}>
      <NavBar
      title='地图'
      leftText='返回'
      onClickLeft={() => goToHome()}
      rightText={<Search fontSize={20} />}
      onClickRight={() => Toast('按钮')}
    />
      <div ref={mapRef} id='container' style={{ width: '100%', height: '800px' }}></div>
      <MapList ref={mapList} id={selected} poltInfo={selectPolt} isOpen={isShow}></ MapList>
    </div>
  )
}
